<template>
  <div class="app-container">
    <div style="height:44px;">
      <el-col :span="24" class="toolbar" style="padding-bottom: 10px;">
        <el-button type="primary" @click="routmoban">新建单品模板</el-button>
      </el-col>
    </div>
    <div>
      <div>
        <h5 class="moban_title">
          <p class="moban_titleft">偏远运费15元，其它包邮</p>
          <p class="moban_titright">
            最后编辑时间：2019-03-21 16:02:40
            <span style="margin-left:5%">复制模板</span>
            <span>|</span>
            <span>修改</span>
            <span>|</span>
            <span>删除</span>
          </p>
        </h5>
        <el-table :data="tableData" style="width: 100%" align="center" header-align="center" border>
          <el-table-column prop="transport" label="可配送区域" width="450"></el-table-column>
          <el-table-column prop="transportto" label="首件（个）"></el-table-column>
          <el-table-column prop="piece" label="首费（元）"></el-table-column>
          <el-table-column prop="freighto" label="续件（个）"></el-table-column>
          <el-table-column prop="freightt" label="续费（元）"></el-table-column>
        </el-table>
      </div>
      <div>
        <h5 class="moban_title">
          <p class="moban_titleft">偏远运费15元，其它8元</p>
          <p class="moban_titright">
            最后编辑时间：2019-03-21 16:02:40
            <span style="margin-left:5%">复制模板</span>
            <span>|</span>
            <span>修改</span>
            <span>|</span>
            <span>删除</span>
          </p>
        </h5>
        <el-table
          :data="tableDatat"
          style="width: 100%"
          align="center"
          header-align="center"
          border
        >
          <el-table-column prop="transport" label="可配送区域" width="450"></el-table-column>
          <el-table-column prop="transportto" label="首件（个）"></el-table-column>
          <el-table-column prop="piece" label="首费（元）"></el-table-column>
          <el-table-column prop="freighto" label="续件（个）"></el-table-column>
          <el-table-column prop="freightt" label="续费（元）"></el-table-column>
        </el-table>
      </div>
      <!-- 分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "TwoYunfei",
  data() {
    return {
      //全部数据
      tableData: [
        {
          transport: "辽宁省,吉林省,黑龙江省,上海市,江苏省,浙江省",
          transportto: "1",
          piece: "0.00",
          freighto: "1",
          freightt: "0.00"
        },
        {
          transport: "新疆维吾尔自治区,西藏自治区",
          transportto: "1",
          piece: "15.00",
          freighto: "1",
          freightt: "5.00"
        }
      ],
      tableDatat: [
        {
          transport: "辽宁省,吉林省,黑龙江省,上海市,江苏省,浙江省",
          transportto: "1",
          piece: "8.00",
          freighto: "1",
          freightt: "2.00"
        },
        {
          transport: "新疆维吾尔自治区,西藏自治区",
          transportto: "1",
          piece: "15.00",
          freighto: "1",
          freightt: "5.00"
        },
        {
          transport: "新疆维吾尔自治区,西藏自治区",
          transportto: "1",
          piece: "15.00",
          freighto: "1",
          freightt: "5.00"
        }
      ],
      // 分页工具
      currentPage1: 1
    };
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    routmoban() {
      this.$router.push("/TwoYunfeimuban");
    }
  }
};
</script>
<style lang="scss" scoped>
.moban_title {
  width: 100%;
  height: auto;
  background: rgba(228, 238, 247, 1);
  float: left;
  padding: 0 0 0 3%;
  margin: 0;
  .moban_titleft {
    float: left;
    width: 60%;
  }
  .moban_titright {
    float: left;
    width: 30%;
    color: #bcbcbc;
    > span {
      color: rgb(0, 153, 0);
    }
  }
}
</style>